<template>
  <h1>Vue2响应式的缺点</h1>
  <h2 v-if="person.name">姓名：{{ person.name }}</h2>
  <h2 v-if="person.sex">性别：{{ person.sex }}</h2>
  <h2>年龄：{{ person.age }}</h2>
  <h2 v-if="person.hobby">爱好：{{ person.hobby }}</h2>
  <button @click="addSex">添加一个sex属性</button>
  <button @click="deleteName">删除name属性</button>
  <button @click="update">更新爱好</button>
</template>

<script>
export default {
  name: "App",
  components: {},

  data() {
    return {
      // vue3中也把data中的数据进行了reactive代理
      // vue3演示不出效果  没有this 
      // 响应式 对象 里面的属性添加和删除
      // 按照我们直接修改，不是响应式的。要按vue提供的方法修改之后才是响应式的
      person: {
        name: "张三",
        age: 18,
        hobby: ["学习", "吃饭"],
      },
    };
  },
  methods: {
    addSex(){
      // vue2中直接改不行
      console.log(this);
      this.person.sex='女'
      console.log(this.person);

// 提供了响应式修改的方法
      this.$set(this.person,'sex','女')
      Vue.$set(this.person,'sex','女')
    },
    deleteName(){
          // delete this.person.name

      this.$delete(this.person,'name')
      Vue.$delete(this.person,'name')
    },
update(){
  this.person.hobby[0]='逛街'

  this.$set(this.person.hobby,0,'逛街')
  this.person.hobby.splice(0,1)
}
 
  },
};
</script>

<style>
</style>
